<script setup>
//路由导入
import { ref } from 'vue';
import { RouterLink } from 'vue-router';

//导入pinia数据
import {userInfoStore} from "../stores/UserInfoPinaStores.js"
let user=ref(userInfoStore());//获取pinia数据 
console.log(user.getUserStatus)

</script>

<template>
    <div class="tbTitle"  >
        <table class="tbStyle" v-if="user.getUserStatus=='' || user.getUserStatus=='0'">
        <tr>
            
            <td class="tbCommon"><RouterLink to="login" class="RaLink">登录界面</RouterLink></td>
            <td class="tbCommon"><RouterLink to="regist" class="RaLink">注册界面</RouterLink></td>
            <td class="tbCommon"><RouterLink to="user" class="RaLink">用户个人信息界面</RouterLink></td>
            <td class="tbCommon"><RouterLink to="userDespoit" class="RaLink">用户充值界面</RouterLink></td>
            <td class="tbCommon"><RouterLink to="userQuerry" class="RaLink">用户查询页面</RouterLink></td>
            
        </tr>
    </table>
    </div>
    
    <div class="tbTitle" v-if="user.getUserStatus=='1'">
        <table class="tbStyle">
        <tr>
            <td class="tbCommon"><RouterLink to="admin" class="RaLink">管理员信息界面</RouterLink></td>
            <td class="tbCommon"><RouterLink to="adminWE" class="RaLink">管理员水电费界面</RouterLink></td>
            <td class="tbCommon"><RouterLink to="adminUser" class="RaLink">管理员用户管理界面</RouterLink></td>
            <td class="tbCommon"><RouterLink to="AdminDormitory" class="RaLink">管理员宿舍管理界面</RouterLink><br></td>
        </tr>
    </table>
    </div>
</template>

<style>
     .tbStyle{
        background-color: burlywood;
        width: 100%; 
    }
    .tbCommon{
        width:15%;
        height:48px;
    }
    .RaLink{
        text-decoration: none;
        color: rgb(90, 85, 38);
    }
    /**
        鼠标悬浮设置
    */
     .tbCommon:hover{
        
        background-color:rgb(21, 204, 107) ;
    }
    .tbCommon:active{
        background-color:crimson ;
    }
    


</style>